<template>
    <div class="aboutUs">
        <div class="page-title">
            {{category.summary}}
        </div>
        <div class="tips" style="word-break: break-all;text-align: left;">
            {{category.describe}}
        </div>
        <div class="page-content">
            <el-row :gutter="20">
                <el-col :span="8" v-for="(item,index) in articleList" :key="index">
                    <div class="card-item" @click="$navTo('/home/exhibitDetail?id='+item.id)">
                        <div class="card-img">
                            <img :src="'http://tianwei888.oss-cn-beijing.aliyuncs.com' + item.img_src" class="img" alt="" style="width: 386px;height: 217px;">
                        </div>
                        <div class="title">
                            {{item.title}}
                        </div>
                        <div class="arrow">
                            <span class="iconfont iconfanhuizuojiantou"></span>
                        </div>
                    </div>
                </el-col>
               
            </el-row>
        </div>
        <div id="page" v-if="total > 1" style="display: flex;justify-content: center;padding: 20px 0;">
            <el-pagination
                layout="prev, pager, next"
                :current-page="page"
                @current-change="nextPage"
                :page-size="num"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import request from "../../utils/request";

export default{
    data(){
        return{
            id:4,
            category:{},
            articleList:[],
            page:1,
            num:6,
            total:null
        }
    },
    created() {
        this.getCategory()
        this.getArticle()
    },
    methods: {
        getCategory(){
            request.post('/article/getArticleCategoryDetail',{id:this.id}).then(res=>{
                this.category = res.data
            })
        },
        getArticle(){
            request.post('/article/getArticleList',{type:this.id,page:this.page,num:this.num}).then(res=>{
                this.articleList = res.data.list
                this.total = res.data.total
            })
        },
        nextPage(i){
            this.page = i
            this.getArticle()
        }
    },
}
</script>
<style lang="scss" scoped>
.aboutUs{
    padding-top: 30px;
    .page-title{
        font-size: 42px;
        color: #111;
        font-weight: 600;
        text-align: center;
    }
    .tips{
        font-size: 22px;
        text-align: center;
        color: #484848;
        line-height: 28px;
        padding-top: 45px;
        padding-bottom: 57px;
    }
    .page-content{
        .card-item{
            margin-bottom: 36px;
            cursor: pointer;
            &:hover{
                .title{
                    text-decoration: underline;
                }
            }
            .card-img{
                width: 100%;
                margin-bottom: 10px;
                .img{
                    width: 100%;
                    height: auto;
                }
            }
            .title{
                font-size: 16px;
                line-height: 22px;
                color: #000;
                margin-bottom: 10px;
                font-weight: 600;
            }
            .arrow{
                .iconfont{
                    display: inline-block;
                    transform: rotate(180deg);
                    font-weight: 600;
                    color: #000;
                    font-size: 18px;
                }
            }
        }
    }
}
</style>